<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    class="overflow-hidden flex flex-col h-full"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="flex-1 overflow-hidden bg-gray-1">
      <z-paging ref="paging" :fixed="false" v-model="list" :fetch="queryList">
        <view
          v-for="item in list"
          :key="item.id"
          class="m-2 bg-white rounded-lg overflow-hidden"
          @tap="goDetail(item.id)"
        >
          <image class="w-full h-40 rounded-lg" :src="item.adImage"></image>
          <view class="bg-white p-2">
            <view class="text-4">
              {{ item.name }}
            </view>
            <view class="my-2 text-gray-5 text-3">
              {{ formatDateTime(item.fromDate) }} - {{ formatDateTime(item.endDate) }}
            </view>
            <view class="text-gray-5 text-3.5">
              <wd-icon name="location" size="20px" class="text-gray-4"></wd-icon>
              {{ item.address }}
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>
<script setup lang="ts">
import debounce from 'lodash/debounce'
import { getMyTournamentList } from '@/service/tournament'
import { formatDateTime } from '@/utils/date'

/** options */
defineOptions({
  name: 'Home',
})

const paging = ref(null)
const list = ref<Tournament[]>([])
/** data */
const { safeAreaInsets } = uni.getSystemInfoSync()
const formData = ref({
  keyword: '',
  type: '',
  state: '',
})

/** lifecycle */
onMounted(() => {})

/** methods */
function getQueryParams() {
  const params = Object.entries(formData.value).reduce((acc, [key, value]) => {
    if (value) {
      acc[key] = value
    }

    return acc
  }, {})

  return params
}

function search() {
  paging.value.reload()
}

const handleKeywordChange = debounce(() => {
  search()
}, 200)

function queryList({ pageNo, pageSize }) {
  const params = getQueryParams()

  getMyTournamentList({ current: pageNo, params, size: pageSize }).then((res) => {
    const { records, total } = res

    paging.value.completeByTotal(records, total)
  })
}

function goDetail(id: number) {
  uni.navigateTo({ url: `/pages/eventConfig/eventConfig?id=${id}` })
}
</script>

<style lang="scss"></style>
